<template>
    <div>
        <van-cell title="查看个人信息" is-link to="/my" arrow-direction="left" class="viewTop"/>
        <div class="viewText">
            <van-icon name="friends-o"  class="viewIcon"/>
            <span>账号</span>
            <span class="text">{{loginName}}</span>
        </div>
        <div class="viewText">
            <van-icon name="phone-o" class="viewIcon"/>
            <span >手机号</span>
            <span class="textPhone">{{phonenumber}}</span>
        </div>
        <div class="viewText">
            <van-icon name="smile-o" class="viewIcon"/>
            <span>昵称</span>
            <span class="text">{{userName}}</span>
        </div>


    </div>
</template>

<script>
    import {mapState} from "vuex"
    export default {
        name: "Collection",
        // components:{
        //     // text:""
        // },
        data() {
            return {
                title: ''
            }
        },
        computed: {
            ...mapState({
                userName:"userName",
                loginName:"loginName",
                phonenumber:"phonenumber"
            })
        },
        created() {
            this.$store.dispatch("getUserInfo1")
        },

    }
</script>

<style scoped lang="less">
    .viewTop {
        background: #EDEDED;
        height: 50px;
        /*line-height: 50px;*/
        font-size: 20px;
        text-align: center;
    }
        .viewText {
            height: 35px;
            line-height: 35px;
            font-size: 18px;
            .viewIcon{
                color: #3396FB;
                margin-right: 10px;
            }
            .text{
                margin-left:100px;
            }
            .textPhone{
                margin-left: 80px;
            }
        }


</style>